<template>
  <div ref="containerRef">
    <n-affix
      :top="115"
      :trigger-top="115"
      :listen-to="() => containerRef"
      style="z-index: 1000; right: 50px"
    >
      <n-popover trigger="hover">
        <template #trigger>
          <n-button type="success" circle v-debounce="loadInfo">
            <template #icon>
              <ReloadCircleOutline />
            </template>
          </n-button>
        </template>
        <span>刷新数据</span>
      </n-popover>
    </n-affix>

    <n-grid cols="1 s:2 m:2 l:3 xl:3 2xl:3" responsive="screen" :x-gap="12" :y-gap="8">
      <n-grid-item>
        <NCard
          title="CPU"
          :segmented="{ content: true, footer: true }"
          size="small"
          :bordered="false"
        >
          <div class="py-2 px-2 flex justify-between">
            <div class="text-sn flex-1">
              <n-progress
                style="margin: 0 8px 12px 0"
                type="circle"
                :percentage="monitorInfo.cpu.used"
                :color="themeVars.successColor"
                :rail-color="changeColor(themeVars.successColor, { alpha: 0.2 })"
                :indicator-text-color="themeVars.successColor">
                <span style="text-align: center">{{ `用户态 ${monitorInfo.cpu.used}%` }}</span>
              </n-progress>
            </div>
            <div class="text-sn flex-1">
              <n-progress
                style="margin: 0 8px 12px 0"
                type="circle"
                :percentage="monitorInfo.cpu.sys"
                :color="themeVars.successColor"
                :rail-color="changeColor(themeVars.successColor, { alpha: 0.2 })"
                :indicator-text-color="themeVars.successColor">
                <span style="text-align: center">{{ `内核态 ${monitorInfo.cpu.sys}%` }}</span>
              </n-progress>
            </div>
          </div>
          <template #footer>
            <div class="flex justify-between">
              <div class="text-sn"> 核心数： </div>
              <div class="text-sn"> {{monitorInfo.cpu.cpuNum}} </div>
            </div>
          </template>
        </NCard>
      </n-grid-item>
      <n-grid-item>
        <NCard
          title="系统内存"
          :segmented="{ content: true, footer: true }"
          size="small"
          :bordered="false"
        >
          <div class="py-2 px-2 flex justify-between">
            <div class="text-sn flex-1">
              <n-statistic label="已使用/总共" :value="String(monitorInfo.memory.used)">
                <template #suffix>
                  <br/>
                  / {{ monitorInfo.memory.total }} GB
                </template>
              </n-statistic>
            </div>
            <div class="text-sn flex-1">
              <n-progress
                style="margin: 0 8px 12px 0"
                type="circle"
                :percentage="Number(toPercentage(monitorInfo.memory.used/monitorInfo.memory.total, 2, false))"
                :color="themeVars.successColor"
                :rail-color="changeColor(themeVars.successColor, { alpha: 0.2 })"
                :indicator-text-color="themeVars.successColor"
              />
            </div>
          </div>
          <template #footer>
            <div class="flex justify-between">
              <div class="text-sn"> 剩余内存： </div>
              <div class="text-sn"> {{monitorInfo.memory.free}} GB </div>
            </div>
          </template>
        </NCard>
      </n-grid-item>
      <n-grid-item>
        <NCard
          title="JVM内存"
          :segmented="{ content: true, footer: true }"
          size="small"
          :bordered="false"
        >
          <div class="py-2 px-2 flex justify-between">
            <div class="text-sn flex-1">
              <n-statistic label="已使用/总共" :value="String(ceil(monitorInfo.jvm.total-monitorInfo.jvm.free, 2))">
                <template #suffix>
                  <br/>
                  / {{ monitorInfo.jvm.total }} MB
                </template>
              </n-statistic>
            </div>
            <div class="text-sn flex-1">
              <n-progress
                style="margin: 0 8px 12px 0"
                type="circle"
                :percentage="Number(toPercentage(ceil(monitorInfo.jvm.total-monitorInfo.jvm.free)/monitorInfo.jvm.total, 2, false))"
                :color="themeVars.successColor"
                :rail-color="changeColor(themeVars.successColor, { alpha: 0.2 })"
                :indicator-text-color="themeVars.successColor"
              />
            </div>
          </div>
          <template #footer>
            <div class="flex justify-between">
              <div class="text-sn"> 剩余内存： </div>
              <div class="text-sn"> {{monitorInfo.jvm.free}} MB </div>
            </div>
          </template>
        </NCard>
      </n-grid-item>
    </n-grid>

    <n-card
      :bordered="false"
      title="系统信息"
      class="mt-4 proCard"
      size="small"
      :segmented="{ content: true }"
    >
      <n-descriptions bordered label-placement="left" class="py-2" :column="2">
        <n-descriptions-item label="系统名">
          {{ monitorInfo.system.computerName }}
        </n-descriptions-item>
        <n-descriptions-item label="系统IP">
          {{ monitorInfo.system.computerIp }}
        </n-descriptions-item>
        <n-descriptions-item label="操作系统">
          {{ monitorInfo.system.osName }}
        </n-descriptions-item>
        <n-descriptions-item label="系统架构">
          {{ monitorInfo.system.osArch }}
        </n-descriptions-item>
      </n-descriptions>
    </n-card>

    <n-card
      :bordered="false"
      title="系统信息"
      class="mt-4 proCard"
      size="small"
      :segmented="{ content: true }"
    >
      <n-descriptions bordered label-placement="left" class="py-2" :column="2">
        <n-descriptions-item label="JDK名称">
          {{ monitorInfo.jvm.name }}
        </n-descriptions-item>
        <n-descriptions-item label="JDK版本">
          {{ monitorInfo.jvm.version }}
        </n-descriptions-item>
        <n-descriptions-item label="启动时间">
          {{ monitorInfo.jvm.startTime }}
        </n-descriptions-item>
        <n-descriptions-item label="运行时长">
          {{ monitorInfo.jvm.runtime }}
        </n-descriptions-item>

        <n-descriptions-item label="安装路径" :span="2">
          {{ monitorInfo.jvm.home }}
        </n-descriptions-item>
        <n-descriptions-item label="项目路径" :span="2">
          {{ monitorInfo.system.userDir }}
        </n-descriptions-item>

        <n-descriptions-item label="运行参数" :span="2" content-style="width: 400px">
          {{ monitorInfo.jvm.inputArgs }}
        </n-descriptions-item>
      </n-descriptions>
    </n-card>

    <NCard
      title="磁盘信息"
      :segmented="{ content: true, footer: false }"
      class="mt-4 proCard"
      size="small"
      :bordered="false"
    >
      <n-table :bordered="false" :single-line="false">
        <thead>
        <tr>
          <th>盘符路径</th>
          <th>文件系统</th>
          <th>盘符类型</th>
          <th>总大小</th>
          <th>可用大小</th>
          <th>已用大小</th>
          <th>使用率</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="sysFile in monitorInfo.systemFiles" :key="sysFile.dirName">
          <td>{{ sysFile.dirName }}</td>
          <td>{{ sysFile.sysTypeName }}</td>
          <td>{{ sysFile.typeName }}</td>
          <td>{{ sysFile.total }}GB</td>
          <td>{{ sysFile.free }}GB</td>
          <td>{{ sysFile.used }}GB</td>
          <td>{{ toPercentage(sysFile.used/sysFile.total) }}</td>
        </tr>
        </tbody>
      </n-table>
    </NCard>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref, onBeforeUnmount } from 'vue';
import { useMessage, useThemeVars } from 'naive-ui';
import { getServerInfo } from "@/api/monitor/server";
import { useRouter, useRoute } from 'vue-router';
import { toPercentage, ceil } from "@/utils/NumUtil";
import { ReloadCircleOutline } from '@vicons/ionicons5';
import { changeColor } from 'seemly';

const themeVars = useThemeVars()
const router = useRouter();
const route = useRoute()
const message = useMessage();
const monitorInfo = ref({
  cpu: {
    cpuNum: 8,
    total: 3999,
    sys: 1.95,
    used: 5.48,
    wait: 0,
    free: 94.52
  },
  memory: {
    total: 19.88,
    used: 14.44,
    free: 5.44
  },
  jvm: {
    total: 384,
    max: 5092,
    free: 262.95,
    threadCount: 64,
    version: "11+28",
    home: "",
    name: "Java HotSpot(TM) 64-Bit Server VM",
    runtime: "",
    startTime: "",
    inputArgs: ""
  },
  system: {
    computerName: "",
    computerIp: "",
    userDir: "",
    osName: "Windows 10",
    osArch: "amd64"
  },
  systemFiles: [{
      dirName: "C:\\",
      sysTypeName: "NTFS",
      typeName: "本地固定磁盘 (C:)",
      total: 118.82,
      free: 34.2,
      used: 84.62
  }]
})

const containerRef = ref<HTMLElement | undefined>(undefined)

const loadInfo = async () => {
  monitorInfo.value = await getServerInfo()
  // TODO: 临时解决方案，后续需要优化
  if (monitorInfo.value.system.osName === 'Linux') {
    monitorInfo.value.systemFiles = [monitorInfo.value.systemFiles[0]]
  }
}

// 定时器
const interval = ref<undefined | number>(undefined)

onMounted(async () => {
  await loadInfo()
  if (!interval.value) {
    interval.value = window.setInterval( () => {
      loadInfo()
    }, 5000)
  }
})

onBeforeUnmount(() => {
  window.clearInterval(interval.value)
  interval.value = undefined
})
</script>

<style lang="less" scoped>
.custom :deep(.n-thing-header__extra) {
  width: 60%;
}
</style>
